<template>
  <div>
    <PageTemplate>
      <div slot="content">
        <PageEditCollapse :is-search="false" :default-collapse="true">
          <div slot="title" class="page-edit-colllapse-title">
            <div style="width: 200px;">{{$t('cm.baseinfo')}}</div>
          </div>
          <div>
            <el-form
              :model="purchaseContractItem"
              label-position="right"
              label-width="150px"
              class="page-edit-colllapse-form"
              :rules="rules"
              ref="purchaseContractItem">
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.contract_name')" prop="contractName">
                    <el-input v-model="purchaseContractItem.contractName" :disabled="true">
                      <el-button slot="append" icon="el-icon-search" @click="showContract"></el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.contract_item_project')" prop="project">
                    <el-input v-model="purchaseContractItem.project" :disabled="true">
                      <el-button slot="append" icon="el-icon-search" @click="showProject"></el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.serial_number')" prop="serialNumber">
                    <el-input v-model="purchaseContractItem.serialNumber"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.contract_arrival_time')">
                    <el-date-picker
                      v-model="purchaseContractItem.requiredArrivalTime"
                      type="date"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.service_name')">
                    <el-input v-model="purchaseContractItem.serviceName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.specification')">
                    <el-input v-model="purchaseContractItem.specification"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.contract_item_num')" prop="num">
                    <el-input v-model.number="purchaseContractItem.num"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.contract_item_unit')">
                    <el-input v-model="purchaseContractItem.unit"></el-input>
                  </el-form-item>
                </el-col>
                </el-row>
                <el-row>
                <el-col :span="12">
                  <el-form-item :label="'不含税单价'" prop="buhanshuidj">
                    <el-input v-model="purchaseContractItem.buhanshuidj"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="'含税单价'" prop="hanshuidj">
                    <el-input v-model="purchaseContractItem.hanshuidj"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.currency')" prop="currency">
                    <el-select 
                      v-model="purchaseContractItem.currency"  
                      placeholder="请选择">
                      <el-option 
                        v-for="item in currencyMap"
                        :key="item.dictText"
                        :label="item.dictText" 
                        :value="item.dictKey+''">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.properAmount')" :rules="priceRules"  prop="amountMoney">
                    <el-input v-model="allMoney"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.plannedCompletionTime')">
                    <el-date-picker
                      v-model="purchaseContractItem.plannedCompletionTime"
                      type="date"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </PageEditCollapse>
        <el-row class="row-empty-10"></el-row>
        <el-row>
          <el-button type="primary" @click="submitForm('purchaseContractItem')" :loading="submiting" class="loading-submiting">
            {{$t('cm.commit')}}
          </el-button>
          <el-button type="primary" @click="toList">
            {{$t('cm.return')}}
          </el-button>
        </el-row>
      </div>
    </PageTemplate>
    <PurBasProjectList
      ref="PurBasProjectList"
      :projectDislogVisible="projectDislogVisible"
      @addProject="addProject"
      @closeProjectDislog="closeProjectDislog"
    >
    </PurBasProjectList>
    <PurBasContractList
      ref="PurBasContractList"
      :contractislogVisible="contractislogVisible"
      @addContract="addContract"
      @closeContractDislog="closeContractDislog"
    >
    </PurBasContractList>
  </div>
</template>

<script>
import { ALERT } from '@/utils/responseHandle'
import * as Constant from '@/utils/constant'
import PageTemplate from '@/components/common/PageTemplate'
import PageEditCollapse from '@/components/common/PageEditCollapse'
import HasBtn from '@/mixins/HasBtn'
import { mapState } from 'vuex'
import {COMMON} from '@/utils/commonUtil'
import api_pur from '@/api/api_pur'
import sys_manage from '@/api/sys_manage'
import Submiting from '@/mixins/Submiting'
import PurBasProjectList from './PurBasProjectList'
import PurBasContractList from './PurBasContractList'
export default {
  components: {
    PageTemplate, PageEditCollapse, PurBasProjectList, PurBasContractList
  },
  mixins: [Submiting],
  data () {
    return {
      purchaseContractItem: {
        id: null,
        itemType: 1, // 基础合同物项保存
        projectId: null,
        contractId: null,
        contractName: null,
        project: null,
        serialNumber: null,
        serviceName: null,
        specification: null,
        num: null,
        unit: null,
        requiredArrivalTime: null,
        plannedCompletionTime: null,
        currency: null,
        amountMoney:null,
        procInstId: 'xxxx',
        hanshuidj: null,
        buhanshuidj: null
      },
      rules: {
        contractName: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        project: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        serialNumber: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        currency: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        num: [
          { type: 'number', message: '数量必须为数字值'}
        ]
      },
      priceRules:[{ required: true, message: '必填,且必须是数字',trigger: 'blur'}],
      currencyMap:[],//币种字典
      projectDislogVisible: false,
      contractislogVisible: false
    }
  },
  created () {
    this.getAllMap()
    if (this.$router.history.current.params.id !== Constant.NEW_PARAMS) {
      this.purContractItemLoadGet(this.$router.history.current.params.id)
    }
  },
  methods: {
    //获取字典接口
    sysDictLoadByPaging (key,callback) { 
      sys_manage.sysDictLoadByPaging({dictGroupKey: key}, result => {
        if (result.code === Constant.RT_SUCCESS) {
          callback(result)
        } else {
          ALERT.error(result.msg)
        }
      })
    },
    purContractItemLoadGet (id) {
      api_pur.purContractItemLoadGet({id}, result => {
        if (result.code === Constant.RT_SUCCESS) {
          this.purchaseContractItem = result.data
        } else {
          // _this.$t('cm.tips')
          ALERT.error(result.msg)
        }
      })
    },
    submitForm (formName) {
      this.openSubmiting()
      this.$refs[formName].validate((valid, error) => {
        if (valid) {
          api_pur.purContractItemSave([this.purchaseContractItem], result => {
            if (result.code === Constant.RT_SUCCESS) {
              ALERT.success(result.msg)
              this.toList()
            } else {
              // _this.$t('cm.tips')
              ALERT.error(result.msg)
            }
            this.closeSubmiting()
          })
        } else {
          this.closeSubmiting()
          return false
        }
      })
    },
    //获取全部字典
    getAllMap(){
      //获取币种字典
      this.sysDictLoadByPaging("run_currency",(result)=>{
          this.currencyMap = result.data
      })
    },
    toList () {
      COMMON.routerTo(Constant.ROUTE_PUR_BAS_CONTRACT_ITEM.index, this.$router)
    },
    showProject () {
      this.projectDislogVisible = true
    },
    closeProjectDislog () {
      this.projectDislogVisible = false
    },
    addProject (data) {
      this.purchaseContractItem.projectId = data.id
      this.purchaseContractItem.project = data.projectCode
      this.closeProjectDislog()
    },
    showContract () {
      this.contractislogVisible = true
    },
    closeContractDislog () {
      this.contractislogVisible = false
    },
    addContract (data) {
      this.purchaseContractItem.contractId = data.id
      this.purchaseContractItem.contractName = data.contractName
      this.closeContractDislog()
    }
  },
  mounted () {
  },
  computed: {
    allMoney() {


      var money = this.purchaseContractItem.hanshuidj * this.purchaseContractItem.num;
      //console.log("hahah",this.purchaseContractItem.hanshuidj+"+"+this.purchaseContractItem.num);
      return  this.purchaseContractItem.amountMoney=Number(money)

    }
  }
}
</script>

<style lang="scss">
</style>
